{# @prop showCloseButton boolean Whether the close button is shown, default to `true` #}
{# @block content The default block #}
{%- props showCloseButton = true -%}

<dialog
    id="{{ _dialog_id }}"
    class="{{ 'bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 ' ~ attributes.render('class')|tailwind_merge }}"
    data-dialog-target="dialog"
    data-action="keydown.esc->dialog#close:prevent click->dialog#closeOnClickOutside"
>
    {%- block content %}{% endblock -%}
    {% if showCloseButton %}
        <button type="button" class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" data-action="click->dialog#close">
            <twig:ux:icon name="lucide:x" />
            <span class="sr-only">Close</span>
        </button>
    {% endif %}
</dialog>
